<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>添加水印和旋转指定角度</title>
    <link rel="stylesheet" href="css/style.css">
    <script src="js/axios.min.js"></script>
</head>
<body>
    <header>添加水印和旋转指定角度</header>
    <main>
        <div class="test-item"><a href="./index.html">返回</a></div>
        <p style="padding-left:10px;">为图片添加水印的场景也是我们经常使用到的，一定程度上可以标明图片来源。下面出了演示添加水印还演示了旋转图片的功能。</p>
        <p style="padding-left:10px;"><b>注意：</b>Thumbnailator添加水印下方只演示了添加图片水印的Demo，文字水印需要绘制后转为BufferedImage后使用，使用步骤与前面的相同。</p>
        <div class="option-box">
          <div class="option-title">旋转图片</div>
          <div class="option-item">
            <label for="file">图片路径</label>
            <input type="text" id="file" placeholder="图片路径"/>
          </div>
          <div class="option-item">
            <label for="widthPix">图片宽度</label>
            <input type="Number" id="widthPix" placeholder="最大宽度"/>
          </div>
          <div class="option-item">
            <label for="heightPix">图片宽度</label>
            <input type="Number" id="heightPix" placeholder="最大高度"/>
          </div>
          <div class="option-item">
            <label for="deg">旋转角度</label>
            <input type="Number" id="deg" placeholder="选装角度"/>
          </div>
        </div>
        <button id="reset">重置</button>
        <button id="submit">提交</button>
        <div id="responseBox" style="margin:10px;"></div>
        <div class="option-box">
          <div class="option-title">图片文件</div>
          <div class="option-item">
            <label for="sourceImagePath">图片文件</label>
            <input type="text" placeholder="图片文件路径" id="sourceImagePath"/>
          </div>
          <div class="option-item">
            <label for="watermarkImagePath">水印图片</label>
            <input type="text" placeholder="水印图片路径" id="watermarkImagePath"/>
          </div>
          <div class="option-item">
            <label for="widthPix2">图片宽度</label>
            <input type="Number" placeholder="最大宽度" id="widthPix2"/>
          </div>
          <div class="option-item">
            <label for="heightPix2">图片高度</label>
            <input type="Number" placeholder="最大高度" id="heightPix2"/>
          </div>
          <div class="option-item">
            <label for="watermarkWidthPix">水印宽度</label>
            <input type="Number" placeholder="水印最大宽度" id="watermarkWidthPix"/>
          </div>
          <div class="option-item">
            <label for="watermarkHeightPix">水印高度</label>
            <input type="Number" placeholder="水印最大高度" id="watermarkHeightPix"/>
          </div>
          <div class="option-item">
            <label for="opacity">水印不透明度</label>
            <input value="0.3" type="range" min="0" max="1" step="0.01" id="opacity"/>
            <span id="opacityVal">30%</span>
          </div>
        </div>
        <button id="watermarkRest">重置</button>
        <button id="waterSubmit">提交</button>
        <div id="watermarkRes" style="margin:10px;"></div>
    </main>
    <script>
      document.getElementById('reset').addEventListener('click',()=>{
        document.getElementById('file').value = '';
        document.getElementById('widthPix').value = '';
        document.getElementById('heightPix').value = '';
        document.getElementById('deg').value = '';
      });
      let showOpacity = document.getElementById('opacityVal');
      document.getElementById('opacity').addEventListener('input',(e)=>{
        let opacity = document.getElementById('opacity').value;
        showOpacity.innerText = (Math.ceil(opacity*100))+'%'
      });
      document.getElementById('watermarkRest').addEventListener('click',()=>{
        document.getElementById('sourceImagePath').value = '';
        document.getElementById('watermarkfile').value = '';
        document.getElementById('widthPix2').value = '';
        document.getElementById('heightPix2').value = '';
        document.getElementById('opacity').value = '';
      })
      let file1 = null; let file2 = null;
      document.getElementById('waterSubmit').addEventListener('click',()=>{
        let watermarkImageBox = document.getElementById('watermarkRes');
        while(watermarkImageBox.firstChild){
          watermarkImageBox.removeChild(watermarkImageBox.firstChild);
        }
        let image = new Image();
        image.src = "http://localhost:8849/thumbnailator-study/processing/watermark?sourceImagePath="
        +document.getElementById('sourceImagePath').value
        +"&watermarkImagePath="+document.getElementById('watermarkImagePath').value
        +"&widthPix="+document.getElementById('widthPix2').value+"&heightPix="+document.getElementById('heightPix2').value+"&opacity="+document.getElementById('opacity').value
        +"&watermarkWidthPix="+document.getElementById('watermarkWidthPix').value+"&watermarkHeightPix="+document.getElementById('watermarkHeightPix').value;
        watermarkImageBox.appendChild(image);
      })
      document.getElementById('submit').addEventListener('click',()=>{
        let filePath = document.getElementById('file').value;
        let widthPix = document.getElementById('widthPix').value;
        let heightPix = document.getElementById('heightPix').value;
        let deg = document.getElementById('deg').value;
        let image = new Image();
        let imageBox = document.getElementById('responseBox');
        while(imageBox.firstChild){
          imageBox.removeChild(imageBox.firstChild);
        }
        image.src = "http://localhost:8849/thumbnailator-study/processing/rotation?filePath="+filePath+"&widthPix="+widthPix+"&heightPix="+heightPix+"&deg="+deg;
        imageBox.appendChild(image);
      });
    </script>
</body>
</html>
